<template>
  <ul class="menu-box">
    <li
      v-for="(item, index) in menuList"
      :key="index"
      :class="[activeNum === index ? 'active' : '']"
      @click="onMenu(item, index)"
    >
      <span>{{ item.name }}</span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const menuList = [
  {
    name: "办事处概览",
    path: "/overview",
  },
  // {
  //   name: "党建引领",
  //   path: "/partyBuilding",
  // },
  {
    name: "保治网络",
    path: "/network",
  },
  // {
  //   name: "智慧养老",
  //   path: "/retirement",
  // },
  // {
  //   name: "乡村自治",
  //   path: "/autonomy",
  // },
];
const activeNum = ref(0);

const onMenu = (data:any, index:number) =>{
  activeNum.value = index;
  router.push({
    path: data.path
  })
}

</script>

<style lang="scss" scoped>
.menu-box {
  position: absolute;
  right: 20px;
  top: 10px;
  // transform: translateX(-50%);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

  li {
    height: 100%;
    width: 151px;
    font-family: PangMenZhengDao, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;
    position: relative;
    cursor: pointer;
    background: url("../../assets/image/menu-bg.png") no-repeat 0 0;
    background-size: 100% 100%;
    color: #eff6ff;

    &::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
      width: 100%;
      box-shadow: #00000073 0 25px 20px -20px;
    }
  }

  .active {
    background: url("../../assets/image/menu-active.png") no-repeat 0 0;
    background-size: 100% 100%;
  }
}
</style>
